require("../../both/base.js")
require("./UserCommentList.scss")

function getCookie(name)
{
    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
    if(arr=document.cookie.match(reg))
        return unescape(arr[2]);
    else
        return null;
}

// 视频页评论列表
class UserCommentList extends React.Component{
    constructor(){
        super()

        this.state = {
            // 记录id防止一直点赞
            staredIds : []
        }
    }

    changePageWrap(page){
        var self = this
        const {changePage} = self.props
        var regx = new RegExp("disable")   // test is disable 也可以加一个isDisable参数给changePageWrap

        return function(e){
            if(regx.test(e.target.className)){
                return
            }

            changePage(page)
        }
    }

    submitStar(commentId,e){
        if(this.state.staredIds.indexOf(commentId) !== -1 || ! this.props.logined){
            return
        }

        var LoginToken = getCookie("LoginToken")
        const {addStar} = this.props

        fetch("/education/user/comment/star",{
            method: 'POST',
            body:   JSON.stringify({
                LoginToken,
                commentId
            }),
            headers: { 'Content-Type': 'application/json' },
            credentials : "same-origin"
        })
            .then(res => res.json())
            .then(json => {
                if(json.status !== 200){
                    toastr.error("用户已注销，请重新登录")
                    return
                }

                this.state.staredIds.push(commentId)

                // trigger props change
                addStar(commentId)
            })
    }

    render(){
        var self = this

        const changePageWrap = this.changePageWrap.bind(this)

        // list data
        var comments = this.props.comments.map((e,i) => {
            var createTime = new Date(e.createdAt)

            return <li key={i}>
                <img src={e.User.avatar} className="head_img"/>
                <div className="comment_cr">
                    <div className="comment_nickname">
                        {e.User.username}
                    </div>
                    <div className="comment_content">
                        {e.text}
                    </div>
                    <div className="comment_footer">
                        <div className="comment_time">
                            {`${createTime.getUTCFullYear()}-${createTime.getUTCMonth()}-${createTime.getUTCDate()}`}
                        </div>
                        <div className={this.state.staredIds.indexOf(e.id) !== -1 ? "comment_praise active" : "comment_praise"}
                             onClick={self.submitStar.bind(self,e.id)}>
                            <i className="fa fa-thumbs-up" />
                            &nbsp;{e.star}
                        </div>
                    </div>
                </div>
            </li>
        })
        if(comments.length == 0){
            comments = <div className="empty_list">列表为空，快来抢沙发吧</div>
        }

        // page
        var totalPage = this.props.totalPage
        var page = this.props.page

        var pageLists = []
        for(var i = 0; i < totalPage; i++){
            if(i < 6){      // 小于6页
                pageLists.push(
                    <li key={i} className={i + 1 == page ? "page cur" : "page"} onClick={changePageWrap(i + 1)}>{i + 1}</li>
                )
            }
        }
        if(pageLists.length > 6){
            pageLists = pageLists.slice(page - 1,page + 5)     // 切6个
        }
        if(pageLists.length == 0){
            pageLists = <li className="page cur">1</li>
        }

        return <div className="user_comment_list_cr bln">

            <ul className="user_comment_list">
                {comments}
            </ul>

            <div className="user_course_list_paging">
                <ul className="paging">
                    <li className={totalPage == 1 || page == 1 ? "disable" : null} onClick={changePageWrap(1)}>首页</li>
                    <li className={totalPage == 1 || page == 1 ? "disable" : null} onClick={changePageWrap(page - 1)}>上一页</li>
                    {pageLists}
                    <li className={(page == totalPage || totalPage == 0) ? "disable" : null} onClick={changePageWrap(page + 1)}>下一页</li>
                    <li className={(page == totalPage || totalPage == 0) ? "disable" : null} onClick={changePageWrap(totalPage)}>尾页</li>
                </ul>
            </div>
        </div>
    }
}

export default UserCommentList